<template>
  <div class="balance">
    <div class="content">
      <!-- <div class="username_box">
        <van-field v-model="username" type="text" @click-input="userContentChange" label="用户名" placeholder="请输入用户名"/>
        <span class="icon_down" @click="userIconChange"></span>
        <ul class="user_list" v-show="isAccountUserShow">
          <li>请选择用户名:</li>
          <li 
            v-for="(item, index) in accountUser" 
            :key="index"
            @click="chooseUser(item)">{{item}}</li>
          <li class="user_item_list" v-show="accountUser.length == 0">无历史记录</li>
        </ul>
      </div> -->
      <div class="more_box">
        <van-field v-model="type" @click-input="typeClick" clearable type="text" label="充值类型" readonly placeholder="请选择充值类型"/>
        <van-image class="more_img_icon" width="40" height="40" :src="moreImg"/>
      </div>
      <div class="more_box">
        <van-field v-model="begin_time" @click-input="beginTimeClick" label="开始时间" readonly placeholder="请选择开始时间"/>
        <van-image class="more_img_icon" width="40" height="40" :src="moreImg"/>
      </div>
      <div class="more_box">
        <van-field v-model="end_time" @click-input="endTimeClick" label="结束时间" readonly placeholder="请选择结束时间"/>
        <van-image class="more_img_icon" width="40" height="40" :src="moreImg"/>
      </div>
      <van-button @click="queryClcik" class="confirm" color="linear-gradient(314deg,#ff5e39 10%, #ff8210 87%)" round>查询</van-button>
      <table>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <tr>
            <th>充值类型</th>
            <th>金额</th>
            <th>时间</th>
            <th>备注</th>
          </tr>
          <tr 
            v-show="recordList !== null" 
            v-for="(item, index) in recordList" 
            :key="index">
            <td>{{type_arr[item.typeid]}}</td>
            <td>{{item.total}}</td>
            <td>
              <span>{{item.logtime | fnDate}}</span>
              <span>{{item.logtime | fnDateTime}}</span>
            </td>
            <td>
              <van-button v-if="item.remark" class="look_remark" @click="dlgLook(item.remark)" round color="linear-gradient(314deg,#ff5e39 10%, #ff8210 87%)">查看详情</van-button>
              <span v-else>/</span>
            </td>
          </tr>
          <tr v-show="recordList === null">
            <td></td>
            <td>暂无数据</td>
            <td></td>
          </tr>
        </van-list>
      </table>
    </div>
    <van-popup v-model="dlgShow" :close-on-click-overlay="false">
      <div class="dlg_content">
        <header>备注</header>
        <p>{{dlgMsg}}</p>
        <footer @click="dlgShow = false">确认</footer>
      </div>
    </van-popup>
    <van-popup v-model="isDateShow" position="bottom" class="popup_box">
      <div class="popup_date">
        <ul class="swipe_box">
          <li 
            class="swipe_item" 
            v-for="(item, id) in columns" 
            :key="id"
            @click="onConfirm(item)">
            {{item}}
          </li>
        </ul>
      </div>
    </van-popup>
    <van-popup v-model="isTypeShow" position="bottom" class="popup_box">
      <div class="popup_date">
        <ul class="swipe_box swipe_type_box">
          <li 
            class="swipe_item" 
            v-for="(item, id) in columns_type" 
            :key="id"
            @click="onTypeConfirm(item, id)">
            {{item}}
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getQueryString } from '../../../common/common'
import loginValidate from '../../../mixins/loginValidate'
import { getHomePage, getPtbList } from '../../../network/home'
export default {
  // mixins: [loginValidate],
  data() {
    return {
      username: '',
      begin_time: null,
      end_time: null,
      recordList: [],
      type_arr: null,
      page: 1,
      loading: true,
      finished: false,
      isDateShow: false,
      curentPicker: 0,
      typeid: '',
      type: '',
      isTypeShow: false,
      columns_type: ['储值获取','代充消耗','后台添加','提现获得','人工打款'],
      moreImg: require('../../../assets/img/withdrawal/ic_arrow_drop_down_black_24dp.png'),
      accountUser: [],//账号保存到cookies
      isAccountUserShow: false,
      dlgShow: false,
      dlgMsg: '',
      isShow: true,
      userinfo: null,
    }
  },
  created () {
    const uid = getQueryString('tgid')
    const token = getQueryString('token')
    if (uid && token) {
        this.$cookies.set('tgid', uid, '1d')
        this.$cookies.set('token', token, '1d')
    }
    getHomePage().then(res => {
      if(res.state === 'ok') {
        console.log(res)
        this.userinfo = res.data
        if(this.$cookieStore.getCookie('recordUser' + this.userinfo.tgid)) {
          var newStr = this.$cookieStore.getCookie('recordUser' + this.userinfo.tgid)
          this.accountUser = newStr.split(',')
          this.username = this.accountUser[0]
        }
        this.getList()
      } else if (res.state === 'err') {
        if(res.msg === 'no_login') {
          this.$toast(res.msg)
          this.$router.replace('/login')
        }else {
          this.$toast(res.msg)
        }
      }
    })
  },
  methods: {
    getList() {
      getPtbList(this.page, this.username,this.typeid, this.begin_time, this.end_time).then(res => {
        this.loading = false
        this.type_arr = res.data.type_arr
        if (res.data.list) {
          console.log(res.data.list);
          this.recordList = [...this.recordList, ...res.data.list]
        } else {
          this.finished = true
          this.empty()
        }
      })
    },
    onLoad() {
      this.page ++
      this.getList()
    },
    queryClcik() {
      this.recordList = []
      this.loading = true
      this.finished = false
      this.page = 1
      getPtbList(this.page, this.username,this.typeid, this.begin_time, this.end_time).then(res => {
        console.log(res);
        if(this.username) {
          this.accountUser.unshift(this.username)
          this.accountUser = this.unique(this.accountUser)
          if(this.accountUser.length > 5) {
            this.accountUser = this.accountUser.slice(0, 5)
          }
          this.$cookieStore.setCookie('recordUser' + this.userinfo.tgid, this.accountUser,315360000)
        }
        this.loading = false
        this.type_arr = res.data.type_arr
        if (res.data.list !== null) {
          console.log(res.data.list);
          this.recordList = [...this.recordList, ...res.data.list]
        } else {
          this.finished = true
          this.empty()
        }
      })
    },
    unique (arr) {
      //数组去重
      return Array.from(new Set(arr))
    },
    chooseUser(val) {
      this.username = val
      this.isAccountUserShow = false
    },
    userIconChange() {
      this.isAccountUserShow = !this.isAccountUserShow
    },
    userContentChange() {
      this.isAccountUserShow = false
    },
    empty() {
      this.username = ''
      this.typeid = ''
      this.type = ''
      this.begin_time = null
      this.end_time = null
    },
    typeClick() {
      this.isTypeShow = true
    },
    onConfirm(value) {
      //确定
      if (this.curentPicker === 0) {
        this.begin_time = value;
      } else if (this.curentPicker === 1) {
        this.end_time = value;
      }
      this.isDateShow = false;
    },
    onCancel() {
      //取消
      this.isDateShow = false;
    },
    onTypeConfirm(value,index) {
      this.type = value
      this.typeid = index + 1
      this.isTypeShow = false;
    },
    onTypeCancel() {
      this.isTypeShow = false;
    },
    beginTimeClick() {
      this.curentPicker = 0
      this.isDateShow = true
    },
    endTimeClick() {
      this.curentPicker = 1
      this.isDateShow = true
    },
    beforeDays(num) {
      // 设置日期，当前日期的前num天
      let myDate = new Date(); // 获取今天日期
      myDate.setDate(myDate.getDate() - (num - 1));
      let dateArray = [];
      let myMonth = myDate.getMonth() + 1;
      if (myMonth >= 1 && myMonth <= 9) {
        myMonth = "0" + myMonth;
      }
      let myDates = myDate.getDate();
      if (myDates >= 0 && myDates <= 9) {
        myDates = "0" + myDates;
      }
      let dateTemp;
      let flag = 1;
      for (let i = 0; i < num; i++) {
        dateTemp = myDate.getFullYear() + "-" + myMonth + "-" + myDates;
        dateArray.push(dateTemp);
        myDate.setDate(myDate.getDate() + flag);
      }
      return dateArray[0];
    },
    dlgLook(val) {
      this.dlgShow = true
      this.dlgMsg = val
    },
    swiperChange(index) {
      console.log(index);
    }
  },
  computed: {
    columns() {
      const newArr = [];
      for (let i = 1; i <= 90; i++) {
        newArr.push(this.beforeDays(i));
      }
      return newArr;
    },
  },
}
</script>

<style lang="less" scoped>
.balance {
  height: 100%;
  background: #fff;
  padding-bottom: 30px;
}

.content {
  box-sizing: border-box;
  padding: 40px 30px;
  margin: 0 auto 50px;
  width: 686px;
  height: auto;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);
}

.van-field {
  font-size: 28px;
  height: 86px;
  padding: 0 40px;
  line-height: 86px;
  background: #F3F3F3;
  border-radius: 20px;
  margin-bottom: 20px;
}

.confirm {
  width: 550px;
  height: 86px;
  margin: 0 auto;
  display: block;
  font-size: 32px;
  font-weight: 700;
  margin-top: 40px;
}

table {
  margin-top: 60px;
  width: 626px;
  height: auto;
  background: #F3F3F3;
  border-radius: 20px;
  tr {
    width: 626px;
    display: flex;
    align-items: center;
    height: 86px;
    font-size: 24px;
    color: #222;
    border-bottom: 1px solid #fff;
    th {
      flex: 1;
    }
    td {
      flex: 1;
      text-align: center;
      span {
        display: inline-block;
      }
    }
  }
  tr:nth-child(1) {
    background: #7974FF;
    border-radius: 20px 20px 0px 0px;
    font-size: 28px;
    color: #fff;
    border: 0;
  }
  tr:last-child {
    border: 0;
  }
}

.more_box {
  position: relative;
  .more_img_icon {
    position: absolute;
    z-index: 98;
    top: 24px;
    right: 30px;
  }
}

.username_box {
  position: relative;
  .icon_down {
    position: absolute;
    top: 25px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: url('../../../assets/img/charge/icon_down.png') no-repeat;
    background-size: 100%;
  }
  .user_list {
    box-sizing: border-box;
    padding: 10px 20px;
    position: absolute;
    top: 88px;
    left: 200px;
    width: 420px;
    max-height: 500px;
    background: #fff;
    z-index: 99;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);
    line-height: 60px;
    font-size: 24px;
    overflow: auto;
    .user_item_list {
      text-align: center;
      color: #999;
    }
  }
}

.look_remark {
  font-size: 20px;
}

.dlg_content {
  width: 600px;
  height: auto;
  line-height: 40px;
  font-size: 24px;
  color: #666;
  background: #fff;
  text-align: center;
  border-radius: 20px;
  font-size: 24px;
  header {
    border-bottom: 1px solid #eee;
    color: #000;
    font-size: 28px;
    font-weight: 600;
    line-height: 80px;
  }
  footer {
    border-top: 1px solid #eee;
    line-height: 80px;
    color: #ff0000;
    font-size: 28px;
    font-weight: 600;
  }
  p {
    padding: 30px 20px;
    font-size: 28px;
  }
}

.popup_box {
  background: #fff;
  .popup_date {
    height: auto;
    .swipe_box {
      padding: 0 100px;
      height: 616px;
      .swipe_item {
        height: 88px;
        font-size: 30px;
        line-height: 88px;
        text-align: center;
        border-bottom: 1px solid #eee;
      }
    }
    .swipe_type_box {
      height: 440px;
    }
  }
}

</style>